<template>
<div>
 <el-row >
      <el-row class="search-row">
        <el-col :span="12">
          <el-input placeholder="用户名" size="small" v-model="like" >
            <el-button slot="append" icon="el-icon-search" @click="searchUser(like)"></el-button>
          </el-input>
        </el-col>
        <el-col :span="12" style="text-align: right;">
          <el-button type="primary" icon="el-icon-plus" size="small"
            v-show="permission.add" @click="handleCreateUser()">添加</el-button>
        </el-col>
      </el-row>
 </el-row>


  <el-table
    :data="searchUser(like).slice((search.currentPage - 1) * pagesize, search.currentPage * pagesize)"
    border
    style="width: 100%">

 <el-table-column
      prop="id"
      label="编号"
      width="120">
    </el-table-column>

    <el-table-column
      prop="name"
      label="项目名称"
      width="120">
    </el-table-column>

    <el-table-column
      prop="mnemonic_name"
      label="助记名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="type"
      label="项目类型"
      width="120">
    </el-table-column>
    <el-table-column
      prop="sex"
      label="适用性别"
      width="120">
    </el-table-column>


 <el-table-column
      prop="minage"
      label="适用年龄下限"
      width="120">
    </el-table-column>

    <el-table-column
      prop="maxage"
      label="适用年龄上限"
      width="120">
    </el-table-column>

     <el-table-column
      prop="price"
      label="价格"
      width="120">
    </el-table-column>

    <el-table-column

      label="操作"
      width="120">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.$index,scope.row)" type="text" size="small">查看</el-button>
        <el-button type="" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>


    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="search.currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length">
    </el-pagination>


 <!-- 修改弹框 -->
         <el-dialog title="新增检查项目" :visible.sync="dialogFormVisible">

<el-row :gutter="20">
  <el-col :span="5">*项目名称:<el-input placeholder="请输入套餐名称" v-model="Checkitem.name"/></el-col>
  <el-col :span="5">*助记名:<el-input placeholder="请输入助记名" v-model="Checkitem.mnemonicName"/></el-col>
  <!-- <el-col :span="5">*适用性别:<el-input   /></el-col> -->
  <el-col :span="9"></el-col>
</el-row>
<br/><br/>
<el-row :gutter="20">
  <el-col :span="5">*项目类型:<el-input placeholder="0" v-model="Checkitem.type"/></el-col>
  <el-col :span="5">*性别:<el-input placeholder="99" v-model="Checkitem.sex"/></el-col>
  <el-col :span="14"></el-col>
</el-row>


<el-row :gutter="20">
  <el-col :span="5">*年龄下限:<el-input placeholder="0" v-model="Checkitem.minage"/></el-col>
  <el-col :span="5">*年龄上限:<el-input placeholder="99" v-model="Checkitem.maxage"/></el-col>
  <el-col :span="5">*售价:<el-input   v-model="Checkitem.price"/></el-col>
  <el-col :span="9"></el-col>
</el-row>

<br/><br/>
<el-row :gutter="20">
  <el-col >*项目说明:<el-input placeholder="请输入套餐介绍" v-model="Checkitem.remark"/></el-col>
</el-row>
<br/><br/>
<el-row :gutter="20">
  <el-col >*注意事项:<el-input placeholder="请输入套餐注意事项" v-model="Checkitem.attention"/></el-col>
</el-row>
          <div slot="footer"  class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <!-- 设置触发更新的方法 -->
            <el-button type="submit" @click="update">确定</el-button>
          </div>
        </el-dialog>
</div>
</template>

<script>

import {checkitems,addtcheckitem,updtcheckitem} from "@/api/checkitem.js"

export default {
  data(){
    return{
       pagesize:5,
      like:'',
      tableData:[],
      // currentPage:1,
      permission: {
        add: true,
        edit: false,
        remove: false
      },
      // userTotal: 0,
      search: {
        isadd:'',
        username: "",
        sort: "",
        offset: 0,
        limit: 10,
        currentPage: 1
      },
       dialogFormVisible: false,
                formLabelWidth: "80px",
              // 设置form用于进行添加的时候绑定值
               Checkitem: {
               /**
     * 主键
     */
     id:'',
    /**
     * 检查项编码
     */
     code:'',
    /**
     * 检查项名称
     */
     name:'',
    /**
     * 助记名
     */
   mnemonicName:'',
    /**
     * 适用性别
     */
     sex:'',
    /**
     * 适用年龄
     */
    minage:'',
   maxage:'',
    /**
     * 价格
     */
     price:'',
    /**
     * 所属分类
     */
   affiliationClassify:'',
    /**
     * 查检项类型,分为检查和检验两种
     */
    type:'',
    /**
     * 项目说明
     */
     remark:'',
    /**
     * 注意事项
     */
     attention:'',
    /**
     * 创建时间
     */
     createtime:'',
    /**
     * 修改时间
     */
     updatetime:'',
               }
        }
  },
      methods:{
        searchUser(like){
      // console.log(like)
      return this.tableData.filter((item,i)=>{
            if(item.name.includes(like)){
              return item;
            }
          })

    },
       async update() {
         let tk=confirm("确认添加？")

         if(this.isadd){
           console.log(this.isadd)
            if(tk){

            let [upded] =await Promise.all([
            addtcheckitem(this.Checkitem)
          ])
            }

         }else{

           if(tk){
             console.log(this.Checkitem)
          let [tc] =await Promise.all([
            updtcheckitem(this.Checkitem)
          ])

          }

         }

              this.pageInit();
            this.dialogFormVisible = false;
     },
     cancel() {
      // 取消的时候直接设置对话框不可见即可
      this.dialogFormVisible = false;
    }
    ,
    handleEdit(index, row) {
        console.log(index*this)
              //  // 将数据的index传递过来用于实现数据的回显
              //  this.Checkitem = this.tableData[index];
              //   this.currentIndex = index;
                this.Checkitem=row
                this.isadd=false;
                // 设置对话框的可见
                this.dialogFormVisible = true;
                console.log(this.isadd)
                console.log(this.Checkitem)

          },
      async pageInit(){
        try{
          let [checkitem] =await Promise.all([
            checkitems()
          ])

            this.tableData=checkitem.data
        }catch(error){
            console.log(error);
        }

          }
      ,

     /*  async delEmpById(index,row){
        console.log(row.id)

          let [deled] =await Promise.all([
            del(row.id)
          ])
            this.pageInit();
            this.dialogFormVisible = false;
      }, */

      handleSizeChange(val) {
            this.search.limit = val;
             this.search.offset = (this.search.currentPage - 1) * val
               this.searchUser()
    },
    handleCurrentChange(val) {
      this.search.offset = (val - 1) * this.search.limit
      this.search.currentPage = val
      // this.searchUser()
    },

     handleCreateUser() {  //添加
      this.Checkitem={}
      this.isadd=true;
      this.dialogFormVisible = true
    },

    handleClick(index,row) {
      this.Checkitem=row
        this.dialogFormVisible=true
      },



      },

      created(){
        this.pageInit();
      }
}
</script>

<style>

</style>
